<script setup>
import axios from "@/util/axios";
import { defineProps, watch ,ref} from "vue";


const tableData = ref([])

const props = defineProps({
  id: {
    type: Number,
    default: -1,
    Required: true,
  },
});

watch(
  //里面有两个参数，第一个props监听哪个参数
  () => props.id,
  //第二个监听后要执行的哪个操作
  () => {
    console.log("id=" + props.id);
    let id = props.id;
    if (id != -1) {
      initOrderData(id);
    }
  }
);

//前端请求
const initOrderData = async (id) => {
  //get后面的是请求后端的地址，然后带个id的参数
  const res = await axios.get("admin/orderDetail/list/" + id);
  console.log(res.data.list);
  tableData.value = res.data.list;
};
</script>

<template>
  <!-- Dialog 对话框实现详情按钮弹窗显示， 饿了么ui组件 -->
  <!-- model-value是否显示 Dialog -->
  <!-- title说明：Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入 -->
  <!-- detailsVisible是从父组件order下index传过来 -->
  <el-dialog model-value="detailsVisible" title="订单详情" width="40%">
    <el-table :data="tableData" stripe style="width: 100%;">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="goodsPic" label="商品图片" >
            <template v-slot="scope">
                <!-- /image/fiery是后端WebAppConfigurer里写的 -->
                <img :src="'http://localhost:8080/image/fiery/'+scope.row.goodsPic" width="100" height="100" />
            </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" width="120"></el-table-column>
        <el-table-column prop="goodsNumber" label="购买数量" width="120"></el-table-column>
        <el-table-column prop="goodsPrice" label="价格" width="120"></el-table-column>


    </el-table>
  </el-dialog>
</template>

<style scoped>
</style>